<template>
  <div style="height: 100%">
    <el-container style="height: 100%; border: 1px solid #eee;">
<!--      style="background-color: rgb(238, 241, 246);height: 100%;box-shadow: 2px 0 6px rgb(0 21 41 / 35%)";-->
      <el-aside width="auto" style="border: 1px solid #234043;">
        <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow" />
      </el-aside>
      <el-container>
        <el-header style="font-size: 12px;border-bottom: 1px solid #234043; line-height: 60px;">
          <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse" :user="user" />
        </el-header>
        <el-main style="padding: 0px">
          <!--        表示当前页面的子路由会在 <router-view /> 里面展示-->
          <router-view @refreshUser="getUser" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Aside from '@/components/Aside';
export default {
  name: 'Manage',
  data(){
    return {
      collapseBtnClass:'el-icon-s-fold',
      isCollapse:false,
      logoTextShow:true,
      user: {}
    }
  },
  components: {
    Header,
    Aside,
  },
  created() {
    // 从后台获取最新的User数据
    this.getUser()
  },
  methods:{
    collapse(){ //点击收缩按钮触发
      this.isCollapse = !this.isCollapse
      if(this.isCollapse){
        this.collapseBtnClass = 'el-icon-s-unfold'
        this.logoTextShow = false
      }
      else {
        this.collapseBtnClass = 'el-icon-s-fold'
        this.logoTextShow = true
      }
    },
    getUser() {
      let username = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).username : ""
      if (username) {
        // 从后台获取User数据
        this.request.get("/user/username/" + username).then(res => {
          // 重新赋值后台的最新User数据
          this.user = res.data
        })
      }
    }
  }
}
</script>

<style scoped>
  .el-container{
    background-image: url("../../src/assets/image/Home/you.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
</style>
